<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-13 16:45:30
 * @LastEditors: luosi 1297957337@qq.com
 * @LastEditTime: 2025-01-07 09:15:30
 * @FilePath: \sr_system_manager_ui\src\views\project\components\ConclusionReview\index.vue
 * @Description: 结项审核
-->

<template>
  <div class="conclusion-review">
    <div class="title">{{ projectName }}</div>
    <div class="content">
      <el-form :model="form" label-width="auto">
        <el-form-item label="结项材料">
          <div w-full>
            <el-segmented v-model="previewType" :options="opts" style="margin-bottom: 1rem" />
            <FilePreviewMultiple v-if="previewType === 1" :fileList="fileList || []" />
            <el-table :data="fileList" border style="width: 100%">
              <el-table-column prop="name" label="文件名称" min-width="540" />
              <el-table-column prop="createdByName" label="上传人" min-width="240" />
              <el-table-column prop="createdTime" label="上传时间" min-width="240">
                <template #default="{ row }">
                  <div>{{ formateDate(row.createdTime).format('YYYY-MM-DD HH:mm') }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="240">
                <template #default="{ row }">
                  <el-button link type="primary" @click="handleDownload(row)">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="相关成果">
          <el-table :data="achievementList" border style="width: 100%">
            <el-table-column prop="name" label="成果名称" min-width="780" />
            <el-table-column prop="uploadTime" label="上传时间" min-width="240">
              <template #default="{ row }">
                <div>{{ formateDate(row.uploadTime).format('YYYY-MM-DD HH:mm') }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="240">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleDetail(row.achievementId, row.achvType)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="审核意见" required>
          <QuickText v-model="form.message" style="width: 100%" />
        </el-form-item>
        <el-form-item label="相关文件">
          <FileUpload v-model="form.files" drag :limit="20" :is-show-tip="false" width="400px" />
        </el-form-item>
      </el-form>
      <div class="h-[72px]" />
    </div>
    <div class="footer">
      <el-button v-loading="rejectLoading" @click="reject">驳回</el-button>
      <el-button v-loading="approveLoading" type="primary" @click="approve">通过</el-button>
      <el-button type="primary" @click="handleEdit">编辑</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import QuickText from '@/components/QuickText/index.vue'
import formateDate from '@/utils/formateDate';
import { getApproveMaterialDetailsApi, projectApproveApproveApi, projectApproveRejectApi } from '@/api/project';
import { AchievementDTO, AttachmentFileInfoDTO, BaseSuccessRespDTO, ProjectMaterialDetailVO } from '@/api/project/types';
import FilePreviewMultiple from '@/components/FilePreviewMultiple/index.vue'

const { proxy } = getCurrentInstance()

const route = useRoute()
const router = useRouter()
const projectId = computed(() => route.query.projectId)
const projectName = computed(() => route.query.projectName)
const status = computed(() => route.query.status)
const projectNature = computed(() => route.query.projectNature)

const form = ref({
  message: '',
  files: []
})

const fileList = ref<AttachmentFileInfoDTO[]>([])
const achievementList = ref<AchievementDTO[]>([])
const previewType = ref(1)
const opts = [
  { label: '预览', value: 1 },
  { label: '列表', value: 2 },
]

const { run: getDetail } = useRequest(() => getApproveMaterialDetailsApi({
  materialType: 3,
  projectId: projectId.value
}), {
  manual: true,
  onSuccess: (res: ProjectMaterialDetailVO) => {
    fileList.value = res?.attachmentFileInfoDTOList || []
    achievementList.value = res?.achievementDTOList || []
  }
})

const { run: approve, loading: approveLoading } = useRequest(() => projectApproveApproveApi({
  projectId: projectId.value,
  type: 4,
  message: form.value.message,
  fileIds: form.value.files?.map(item => item.id) || []
}), {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      ElMessage({
        message: '通过成功!',
        type: 'success',
        plain: true,
      })
      proxy.$tab.closePage()
    }
  }
})

const { run: reject, loading: rejectLoading } = useRequest(() => projectApproveRejectApi({
  projectId: projectId.value,
  type: 4,
  message: form.value.message,
  fileIds: form.value.files?.map(item => item.id) || []
}), {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      ElMessage({
        message: '驳回成功!',
        type: 'success',
        plain: true,
      })
      proxy.$tab.closePage()
    }
  }
})

const handleDownload = (file) => {
  proxy.$download.downloadFileSync(file?.url, file?.name)
}

const handleEdit = () => {
  router.push({ path: '/project/mine/edit', query: { projectId: projectId.value, projectName: projectName.value, mode: 'edit', type: 0, status: status.value, projectNature: projectNature.value } })
}

const handleDetail = (id: string, achvType: number) => {
  const achvTypePathMap = {
    0: '/resultsManagement/office/office-academic-paper/detail', // 学术论文
    1: '/resultsManagement/office/office-academic-work/detail', // 学术著作
    2: '/resultsManagement/office/office-patent/detail', // 专利、成果转让
    3: '/resultsManagement/office/office-vertical/detail', // 纵向结项
    4: '/resultsManagement/office/office-horizontal/detail', // 横向项目
    5: '/resultsManagement/office/office-guide-student/detail', // 指导学生科研项目结项
    6: '/resultsManagement/office/office-laboratory/detail', // 重点实验室、科研团队立项
    7: '/resultsManagement/office/office-research-award/detail', // 科研获奖
    8: '/resultsManagement/office/office-sports-competition/detail', // 体育竞赛
    9: '/resultsManagement/office/office-other/detail', // 其他成果
  }
  router.push({ path: achvTypePathMap[achvType as keyof typeof achvTypePathMap], query: { id } })
}

onMounted(() => {
  getDetail()
})


</script>

<style lang="scss" scoped>
.conclusion-review {
  --at-apply: bg-white min-h-full;

  .title {
    --at-apply: py-16px pl-20px text-[16px] font-bold border-b-[1px] border-b-solid border-[#E5E6EB];
  }

  .content {
    --at-apply: p-[20px] white;
  }

  :deep(.el-textarea__inner) {
    min-height: 120px !important;
  }
}

.footer {
  --at-apply: fixed bottom-0 left-0 w-full h-[72px] leading-[72px] text-center border-t-solid border-t-[1px] border-[#E5E6EB] bg-white z-[100];
}
</style>